<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //初始化数据(二维数组)
        var courseList = new Array(); 
        courseList["第一学期"] = ["HTML","CSS","JAVASCRIPT","NODE"];
        courseList["第二学期"] = ["JAVA","ANGULARJS","SPRING","JDBC"];
        courseList["第三学期"] = ["SWING","MYBATIS","SPRINGBOOT","CLOUD"];


        //当页面首次加载的时候就调用这个函数，将学期添加到第一个下拉列表中
        function allData() {
            //1. 根据id(selTerm)获取到select节点
            var selTerm = document.getElementById("selTerm");
            //2. 使用for.....in遍历数组获取到学期
            for(var i in courseList) {
                //3.将学期放到下拉列表中  语法：selectObject.add(option,before)
                //new Option(i)     <option>学期<option>
                selTerm.add(new Option(i),null);
            }
        }

        //当选择某个学期的时候，我们要将学期所对应的课程放到第二个下拉列表中
        function changeData() {
            //1. 获取第一个下拉列表节点对象selTerm并获取到选项的值
            var selTerm = document.getElementById("selTerm").value;
            //2. 获取第二个下拉列表节点对象selCourse
            var selCourse = document.getElementById("selCourse");
            //3. 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
            //面试有的时候会问：如何清除下拉列表中的选项
            selCourse.options.length = 0;
            //4. 将学期所对应的课程添加到第二个下拉列表中
            for(var i in courseList) {
                // console.log(i);
                if(i==selTerm){
                    for(var j in courseList[i]) {
                    // console.log(j);
                    selCourse.add(new Option(courseList[i][j]),null); //出问题了，所有的数据都会添加到第二个下拉列表中
                }
                }
            }
        }

    </script>
</head>

<body onload="allData()">

<!-- 二级联动 -->
<form action="" method="post" id="form1">
    <table align="center">
        <tr>
            <td>学期</td>
            <td>
                <select id="selTerm" onchange="changeData()">
                    <option value="">请选择学期</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>课程</td>
            <td>
                <select id="selCourse">
                    <option value="">请选择学期所对应的课程</option>
                </select> 
            </td>
        </tr>
    </table>

</form>

</body>
</html>